<template>
  <div class="department">
    <div class="left">
      <el-form ref="form" :model="form">
        <el-form-item label="机构类别">
          <el-select v-model="form.region" :style="{width: '60%'}" @change="changeMode">
            <el-option value="1" label="大舜物流">大舜物流</el-option>
            <el-option value="2" label="疾控及接种门诊">疾控及接种门诊</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-if="showMode === '2'">
        <div class="area-con">
          <div class="area" v-for="(item, index) in areas" @click="changeArea(index)" :key="index" :class="activeIndex === index && 'active'">
            <img src="../../assets/department/area_coordinate.png"/>
            <span class="area-name">{{item.name}}</span>
            <span class="area-value">{{item.value}}</span>
          </div>
        </div>
      </template>
      <template v-if="showMode === '1'">
        <div class="area-con">
          <div
            class="area logistics"
            v-for="(item, index) in areas"
            @click="changeArea(index)"
            :key="index"
            :class="[activeIndex === index && 'active', item.status === '0' && 'normal', item.status === '1' && 'trans', item.status === '2' && 'alarm']"
          >
            <img v-if="item.status === '0'" src="../../assets/department/normal.png"/>
            <img v-if="item.status === '1'" src="../../assets/department/trans.png"/>
            <img v-if="item.status === '2'" src="../../assets/department/alarm.png"/>
            <div class="area-right">
              <div class="area-name">
                <span>{{item.name}}</span>
                <span>{{item.time}}</span>
              </div>
              <div class="area-value">
                <span>{{item.temp}}℃</span>
                <span>{{item.hum}}%RH</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="middle">
      <div v-if="showMode === '2'" class="outpatient">
        <div class="top">
          <div v-for="(item ,index) in statistic" :key="index" class="statistic">
            <img :src="item.imgUrl"/>
            <span class="statistic-name">{{item.name}}</span>
            <span class="statistic-value">{{item.value}}</span>
          </div>
        </div>
        <div class="bottom" id="map0">
        </div>
      </div>
      <div v-if="showMode === '1'" class="logistics">
        <div class="top">
          <div class="month-or-year">
            <span :class="{active:isMonth}" @click="monthOrYear(true)">月</span>
            <span :class="{active:!isMonth}" @click="monthOrYear(false)">年</span>
          </div>
          <div class="statistic-con">
            <div v-for="(item ,index) in statistic" :key="index" class="statistic">
              <img :src="item.imgUrl"/>
              <span class="statistic-name">{{item.name}}</span>
              <span class="statistic-value" :style="item.status === '1' && {color: '#FF7D5E'}">{{isMonth ? item.monthValue : item.yearValue}}</span>
            </div>
          </div>
        </div>
        <div class="bottom" id="map1"></div>
      </div>
    </div>
    <div class="right">
      <template v-if="showMode === '2'" class="outpatient">
        <div class="right-top panel">
          <div class="panel-head">
            <div class="title">
              <span class="title-name">腊山街道办事处社区卫生服务中心预防接种门诊</span>
            </div>
            <el-input>
              <i slot="suffix">
                <img src="../../assets/common/search_in_input.png"/>
              </i>
            </el-input>
          </div>
          <div class="outpatient-info">
            <div v-for="(item, index) in outpatientInfo" :key="index" class="outpatient-info-item">
              <span class="outpatient-info-item-text">{{item.name}}</span>
              <span class="outpatient-info-item-value">{{item.value}}</span>
            </div>
          </div>
        </div>
        <div class="right-middle panel">
          <el-tabs>
            <el-tab-pane label="服务能力">
              <div class="description">
                <el-row>
                  <el-col :span="12">
                    <span class="description-label">机构编码:</span>
                    <span class="description-value">370101645</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="description-label">历史日接种高峰:</span>
                    <span class="description-value">9:00-10:30</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <span class="description-label">单位名称:</span>
                    <span class="description-value">腊山街道办事处社区卫生服务中心预防接种门诊</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="description-label">历史周接种高峰:</span>
                    <span class="description-value">周三、周六</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <span class="description-label">预防接种服务内容:</span>
                    <span class="description-value">一类疫苗、二类疫苗</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="description-label">历史月接种高峰:</span>
                    <span class="description-value">11、23、28号</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <span class="description-label">开诊频次:</span>
                    <span class="description-value">按日</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="description-label">日均接种人数:</span>
                    <span class="description-value">230</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <span class="description-label">开诊时间:</span>
                    <span class="description-value">周一、二、四、五上午7:30-11:00</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="description-label">月均接种人数:</span>
                    <span class="description-value">3290</span>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="机构信息"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-bottom panel">
<!--          <el-radio-group v-model="rightBottomRadio">-->
<!--            <el-radio-button label="D">日</el-radio-button>-->
<!--            <el-radio-button label="W">周</el-radio-button>-->
<!--            <el-radio-button label="M">月</el-radio-button>-->
<!--          </el-radio-group>-->
          <el-tabs>
            <el-tab-pane label="服务人数趋势">
              <div :style="{width: '100%', height: '100%'}" is="chart1"></div>
            </el-tab-pane>
            <el-tab-pane label="服务剂次趋势"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template v-if="showMode === '1'">
        <div class="right-top-logistics panel">
          <div class="title">
            <span class="title-name">疫苗存储区</span>
            <one-or-four @listenOneOrFour="oneOrFour"></one-or-four>
          </div>
          <el-carousel arrow="hover" class="content" :autoplay="false" indicator-position="none">
            <el-carousel-item v-for="item in 4" :key="item">
              <div v-if="isFour" v-for="item in 4" class="quarter">{{item}}</div>
              <div v-if="!isFour" class="oneScreen">{{item}}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right-middle-logistics">
          <div class="right-middle-left-logistics panel">
            <div class="title">
              <span class="title-name">状态栏</span>
            </div>
            <div class="content">
              <div v-for="(item, index) in news" :key="index" class="news-item">
                <span class="news-time">{{item.time}}</span>
                <span class="news-content">{{item.content}}</span>
              </div>
            </div>
          </div>
          <div class="right-middle-right-logistics panel">
            <div class="title">
              <span class="title-name">疫苗扫码核对区</span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  import BaiduMap from 'BaiduMap'
  import echarts from 'echarts'
  import OneOrFour from '../../components/oneOrFour'
  import { getShowDataByDepartmentCategory, getDataByAreaId, getDepartmentInfoByDeptId, getEChartDataByDeptIdAndType } from '@/api/department'

  export default {
    name: 'department',
    components: {
      OneOrFour
    },
    data() {
      return {
        form: {
          region: '1'
        },
        showMode: '1',
        areas :[],
        activeIndex: 0,
        statistic: [],
        news: [
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
          {
            time: '07-12 14:02',
            content: '济南市出台疫苗',
          },
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
          {
            time: '06-06 14:02',
            content: '济南市出台疫苗修改',
          },
        ],
        isMonth: true,
        isFour: true,
        outpatientInfo: [],
        rightBottomRadio: 'W'
      }
    },

    mounted() {
      this.initLeftArea();
      this.loadStatistic();
      this.loadOutpatientInfo()
      // this.initLineChart()
      // if(this.showMode === '1'){
      //   this.initMap1()
      // }else {
      //   this.initMap0()
      // }
    },

    updated() {
      if(this.showMode === '1'){
        // this.initMap1()
      }else {
        // this.initMap0()
        // this.initLineChart()
      }
    },

    methods: {
      changeArea(index) {
        this.activeIndex = index;
      },

      changeMode(e) {
        this.showMode = e;
        this.activeIndex = '0';
        this.isMonth = true;
        this.loadStatistic()
      },

      monthOrYear(key) {
        this.isMonth=key
      },

      oneOrFour(data) {
        this.isFour = data;
      },

      initLeftArea() {
        getShowDataByDepartmentCategory({
          type: this.showMode,
          deptId: localStorage.getItem('deptId')
        }).then(response => {
          if(response.success) {
            this.areas = response.data
          }
        })
      },

      loadStatistic() {
        getDataByAreaId({
          deptId: localStorage.getItem('deptId'),
          id: this.areas.length > 0 ? this.areas[0].id : localStorage.getItem('deptId'),
          type: this.showMode,
        }).then(response => {
          const statisticArr = [];
          if(response.success){
            response.data.forEach(item => {
              statisticArr.push({
                ...item,
                imgUrl: require('@/assets' + item.imgUrl)
              })
            })
            this.statistic = statisticArr
          }
        })
      },

      loadOutpatientInfo() {
        getDepartmentInfoByDeptId({
          deptId: localStorage.getItem('deptId'),
          id: this.areas.length > 0 ? this.areas[0].id : localStorage.getItem('deptId'),
        }).then(response => {
          if(response.success){
            this.outpatientInfo = response.data
          }
        })
      },

      initLineChart() {
        getEChartDataByDeptIdAndType().then(response => {
          if (response.success) {
            const chart = echarts.init(document.getElementById('chart1'))
            const xAxisData = response.data.map(item => {
              item.time
            });
            const option = {
              xAxis: {
                type: 'category',
                data: () => (
                  response.data.map(item => {
                    return item.time
                  })
                )
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: () => (
                  response.data.map(item => {
                    return item.value
                  })
                ),
                type: 'line',
                smooth: true
              }]
            }
            chart.setOption(option)
          }
        })
      },

      initMap0() {
        const map = new BaiduMap.Map('map0');
        const point = new BaiduMap.Point(120.343373,31.540212);
        const marker = new BaiduMap.Marker(point);
        map.centerAndZoom(point,15);
        map.addOverlay(marker);
        map.setMapStyleV2({
          styleId: 'a556f595235dd9cd6bf301e6e0d03961'
        });
      },

      initMap1() {
        const map = new BaiduMap.Map('map1');
        const point = new BaiduMap.Point(120.343373,31.540212);
        const marker = new BaiduMap.Marker(point);
        map.centerAndZoom(point,15);
        map.addOverlay(marker);
        map.setMapStyleV2({
          styleId: 'a556f595235dd9cd6bf301e6e0d03961'
        });
      },

    }
  }
</script>

<style scoped lang="less">
  @import "../../styles/common.less";
  @import "../../styles/department/department.less";
</style>
